<template>
  <div class="template flex">
    <left-menu :menus="menus" class="left-menu-content"></left-menu>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import LeftMenu from '@/components/left-menu.vue';
import { reactive } from 'vue';

export interface Menu {
  title: string,
  url: string
}

const menus: Array<Menu> = reactive([
  { title: '模板页', url: '/template/test1' },
  { title: 'element-plus', url: '/template/element-plus' },
  { title: 'dayjs', url: '/template/dayjs' },
  { title: 'vuex-templat', url: '/template/vuex-template' },
  { title: 'echarts-template', url: '/template/echarts-template' },
  { title: '404页', url: '/404' },
  { title: '父子组件通信', url: '/template/component-communication1' },
  { title: '接口调用示例', url: '/template/ajax' },
  { title: '主题色', url: '/template/theme' },
  { title: '国际化vue-i18n', url: '/template/i18n' },
])
</script>
<style lang="scss" scoped>
.template {
  width: 100%;
  height: 100%;
}
.left-menu-content {
  width: 220px;
  min-width: 220px;
  height: 100%;
}
.content {
  width: 100%;
  height: 100%;
  // background: green;
  overflow: auto;
}
</style>
